<template>
  <div class="nav-tabs">
    <div :class="['el-tag','tab',{active:$route.path==='/dashBoard'}]" @click="jumpTag('/dashBoard')">
      首页
    </div>
    <div :class="['el-tag','tab',{active:$route.path===tab.path}]" v-for="(tab, index) in $store.state.base.navtabs"
      @contextmenu.prevent="showMenu($event, index,tab.path)" :key="tab.path" @click="jumpTag(tab.path)">
      {{ tab.name }}
      <i class="el-icon-close" @click="closeTag({index,cloPath:tab.path,nowPath:$route.path})"></i>
    </div>
    <!-- 默认菜单 -->
    <div class="tabMenu" v-show="tabMenuShow" :style="{left: left+'px',top: top+'px'}">
      <div class="tab-item" @click="closeAllTag">关闭所有</div>
      <div class="tab-item" @click="closeOthTag">关闭其他</div>
      <div class="tab-item" @click="$router.go(0)">刷新</div>
    </div>
  </div>
</template>

<script>
/* 加激活色
  当路由的路径和tab的path相同时添加激活色
*/
export default {
  data() {
    return {
      tabMenuShow: false,
      delindex: -1,
      top: 0,
      left: 0,
      delPath: ''
    }
  },
  methods: {
    // 点击关闭时会触发vuex里面的方法
    closeTag(dataPath) {
      this.$store.commit('base/DEL_TAB', dataPath)
    },
    jumpTag(goPath) {
      if (this.$route.path !== goPath) {
        this.$router.push(goPath)
      }
    },
    // 点击右键弹出菜单
    showMenu(e, index, path) {
      this.tabMenuShow = true
      this.left = e.clientX + 2
      this.top = e.clientY + 2
      this.delindex = index
      this.delPath = path
    },
    // 点击关闭所有
    closeAllTag() {
      this.$store.commit('base/DEL_ALLTA')
      this.$router.push('/dashBoard')
    },
    // 点击关闭其他
    closeOthTag() {
      this.$store.commit('base/DEL_OTHER', this.delindex)
      this.$router.push(this.delPath)
    }
  },
  mounted() {
    window.onclick = (e) => {
      this.tabMenuShow = false
    }
  },
  beforeDestroy() {
    window.onclick = null
  },
}
</script>

<style lang="scss" scoped>
// 头部下半部分
.nav-tabs {
  border-bottom: 1px solid rgb(211, 211, 211);

  .el-tag {
    color: black;
    text-align: center;
    width: 120px;
    height: 40px;
    background-color: #fff;
    line-height: 40px;
    border: none;
    border-right: 1px solid rgb(211, 211, 211);
    border-radius: 0;
  }

  .active {
    color: red;
    background-color: antiquewhite;
  }
}

// 右键点击
.tabMenu {
  position: fixed;
  background-color: #fff;
  z-index: 100;

  .tab-item {
    height: 30px;
    line-height: 30px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    padding: 0 20px;

    &:hover {
      background-color: rgba(70, 42, 42, 0.3);
    }
  }
}

// 右键菜单
</style>
